<template>
  <div class="playmusic">
    <Navbar />
    <audio
      ref="player"
      :src="muscsrc"
      controls="controls"
      autoplay
    ></audio>
    <Songtheory :id=id></Songtheory>
    <!-- 全屏背景图片 -->
    <div
      class="play-back"
      :style="{'background-image' : 'url(' + muscimg.picUrl + ')'}"
    ></div>
    <div class="m-scroll_wrapper">
      <div class="lyric-pic">
        <div class="m-song-warp">
          <div class="m-song-disc">
            <div class="m-song-turn">
              <div class="m-song-rollwrap">
                <div
                  class="m-song-img"
                  :class="{'a-circling':!isplay}"
                >
                  <img
                    class="u-img"
                    :src="muscimg.picUrl"
                    alt=""
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="position:relative">
          <div class="m-song-info">
            <div class="m-son-h2">
              <span class="m-son-name">{{muscname}}</span>
              <span class="m-son-gap">-</span>
              <b class="m-son-autr">{{musc.replace(',','/')}}</b>
            </div>
            <div class="m-song-lrc">
              <div class="m-song-scroll">
                <div class="m-song-iner">
                  <div
                    class="m-song-lyric"
                    v-for="(item,key,index) in lrcData"
                    :key="index"
                  >
                    <p v-if="currentTime > allKeys[index] && currentTime < allKeys[index+1]">{{item}}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="progress-wrap">
              <span class="has-played-time">{{ time | formatTime }}</span>
              <span class="total-progress">
                <span
                  class="has-played-progress"
                  ref="progress"
                ></span>
              </span>
              <span class="total-time">{{ totaltime | formatTime }}</span>
            </div>
            <div class="m-playbtn">
              <van-icon name="revoke" />
              <van-icon name="arrow-left" />
              <!-- :name="[isplay ? 'play-circle-o': 'pause-circle-o']" -->
              <van-icon
                ref="audioBtn"
                name="pause-circle-o"
                @click="isplauA()"
                v-show="!isplay"
              />
              <van-icon
                ref="audioBtn"
                name="play-circle-o"
                @click="isplauA()"
                v-show="isplay"
              />
              <van-icon name="arrow" />
              <van-icon name="bars" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getPlay, getDetails, getLyric } from '../../../api/playMusic';
import Songtheory from '@/components/songtheory'
import Navbar from '@/components/Navbar'
export default {
  props: ['id'],
  data: () => ({
    muscsrc: null,
    muscimg: {},
    musc: '',
    muscname: '',
    lrcData: {},
    currentTime: 0, // 开始时间
    duration: 0,  // 结束时间
    allKeys: [],
    time: '',//开始时间
    totaltime: '',//总时间
    isplay: false
  }),
  created() {
    this.getDetails()
    this.getPlay()
    this.getLyric()
    this.audioHandle()
  },
  mounted() {
    this.addEventListenerHandler()
  },
  updated() {
    this.audioHandle()
  },
  filters: {
    // 过滤器
    formatTime(time) {
      // 取整且补零
      const mm = `${Math.floor(time / 60)}`.padStart(2, "0");
      const ss = `${Math.floor(time % 60)}`.padStart(2, "0");
      return `${mm}:${ss}`;
    }
  },
  methods: {
    async getPlay() {
      const res = await getPlay(this.id)
      this.muscsrc = res.data.data[0].url
    },
    async getDetails() {
      const res = await getDetails(this.id)
      this.muscname = res.data.songs[0].al.name
      let res2 = res.data.songs[0].ar.map(item => {
        return item.name
      });
      this.musc = String(res2)
      this.muscimg = res.data.songs[0].al
    },
    async getLyric() {
      const res = await getLyric(this.id)
      var lrcArr = {}
      var lyrics = res.data.lrc.lyric.split("\n")
      var reg = /\[\d*:\d*(\.|:)\d*]/g
      for (let i = 0; i < lyrics.length; i++) {
        var timeReg = lyrics[i].match(reg)
        if (!timeReg) continue;
        var t = timeReg[0];
        // 取出分钟
        var min = Number(t.match(/\[\d*/i).toString().slice(1));
        var second = Number(t.match(/\:\d*/i).toString().slice(1));
        // 歌词文本
        var content = lyrics[i].replace(timeReg, "")
        var time = min * 60 + second
        lrcArr[time] = content
      }
      this.lrcData = lrcArr
      this.getAllKeys(lrcArr)
    },
    getAllKeys(lrcArr) {
      for (let key in lrcArr) {
        this.allKeys.push(key)
      }
    },
    addEventListenerHandler() {

      // 当前实时播放的时间
      this.$refs.player.addEventListener("timeupdate", () => {
        this.currentTime = this.$refs.player.currentTime
      })
      // 获取播放总时间
      this.$refs.player.addEventListener("canplay", () => {
        this.duration = this.$refs.player.duration
        this.totaltime = this.duration
      })
    },
    handleClick: function () {
      this.$refs["player"].pause();

    },
    handleClicks: function () {
      this.$refs["player"].play();
    },
    isplauA() {
      this.isplay = !this.isplay
    },
    audioHandle() {
      // 点击播放和暂停
      let { player, audioBtn, progress } = this.$refs
      if (!player) return;
      // 里面的暂停事件存在的时候就停止播放
      if (!this.isplay) {
        this.handleClicks()
        setInterval(() => {
          this.time = this.currentTime;
          // this.totaltime = this.duration
          progress.style.width = `${(this.currentTime / this.duration) * 100}%`;
        }, 100);
      } else {
        this.handleClick()
      }
    }
  },
  components: {
    Songtheory,
    Navbar
  }
}
</script>
<style lang="less">
.playmusic {
  .progress-wrap {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 0.1rem;
    font-size: 0.16rem;
    margin-top: 20px;
    .has-played-time {
      color: #f1f1f1;
    }
    .total-time {
      color: lightgray;
    }
    .total-progress {
      width: 70%;
      height: 0.03rem;
      background: lightgray;
      .has-played-progress {
        display: block;
        width: 0;
        height: 100%;
        background-color: #d44439;
      }
    }
  }
  .m-playbtn {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    .van-icon {
      font-size: 35px;
      color: #fff;
    }
  }
  audio {
    position: absolute;
    bottom: 10px;
    z-index: 200;
    display: none;
  }
  height: ceil(100vh);
  .play-back {
    width: 100%;
    // background-image: url(http://p1.music.126.net/4azOvzVWCzln6E84lPKZ9A==/109951164548112691.jpg?imageView&thumbnail=50y50&quality=15&tostatic=0);
    opacity: 1;
    transform: scale(1.5);
    transform-origin: center center;
    filter: blur(30px);
    background-color: #161824;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    &::before {
      content: " ";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
  .m-scroll_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60px;
    overflow: hidden;
    z-index: 21;
    .m-song-warp {
      padding-top: 70px;
      .m-song-disc {
        width: 247px;
        height: 247px;
        position: relative;
        margin: 0 auto;
        // background-color: chocolate;
        .m-song-turn {
          width: 100%;
          height: 100%;
          .m-song-rollwrap {
            width: 184px;
            height: 184px;
            margin: -92px 0 0 -92px;
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 1;
            @keyframes whirling {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }
            }
            .m-song-img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              overflow: hidden;
              background: url(https://s3.music.126.net/mobile-new/img/disc_default.png?ba7c53e25dbac9fe14f024846ddb57d2=)
                no-repeat;
              background-size: contain;
              .u-img {
                width: 100%;
                vertical-align: middle;
              }
            }
            .a-circling {
              animation: whirling 20s linear infinite;
            }
          }

          &::before {
            content: "";
            background: url(https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4602256867/5855/63fb/325b/d7e4e3a244701ee85fecb5d4f6b5bd57.png?imageView=&quality=75&thumbnail=200y200)
              no-repeat;
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            z-index: 2;
            background-size: contain;
          }
        }
      }
    }
    .m-song-info {
      padding: 0 35px;
      margin-top: 25px;
      position: relative;
      z-index: 20;
      .m-son-h2 {
        text-align: center;
        font-size: 18px;
        line-height: 1.1;
        color: #fefefe;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: 400;
      }
      .m-song-lrc {
        position: relative;
        margin-top: 24px;
        .m-song-scroll {
          height: 67px;
          overflow: hidden;
          mask: -webkit-linear-gradient(top, #000, #000 70%, rgba(0, 0, 0, 0));
          .m-song-lyric {
            margin: 0;
            // padding-bottom: 8px;
            color: rgb(255, 255, 255);
            text-align: center;
          }
        }
      }
      .m-son-gap {
        margin: 0 4px;
      }
      .m-son-autr {
        font-size: 16px;
        font-weight: 400;
        color: hsla(0, 0%, 100%, 0.6);
      }
    }
  }
}
</style>
